---
title: Header
description: Header components designed with Tailwind CSS v4 for marketing websites and web applications. These responsive, SEO-optimized headers feature navigation, branding, and call-to-action layouts, making them perfect for landing pages, SaaS, and eCommerce projects.
category: marketing
emoji: 🗺
slug: headers
wrapper: h-[400px]
terms:
  - layout
  - navigation
components:
  - { title: 'Icon and links on the left, call to actions on the right', dark: true }
  - { title: 'Icon on the left, links in the middle and call to actions on the right', dark: true }
  - { title: 'Icon on the left, links and call to actions on the right', dark: true }
  - { title: 'Icon on the left, links and user dropdown on the right', dark: true }
---

import CollectionHeader from '../../../components/CollectionHeader.astro'

<CollectionHeader>
  # Header Components

  <p>{frontmatter.description}</p>
</CollectionHeader>
